<template>
  <div class="addressBox">
    <!-- 头部 -->
    <div class="bar">
      <div class="back" @click="goBack"><span class="iconfont iconzuojiantou jiantou"></span>返回</div>
      <span>选择项目地址</span>
      <div class="btn">选择</div>
    </div>
    <!-- 搜索框 -->
    <div class="searchBox">
      <mt-search
        class="search"
        v-model="queryValue"
        placeholder="输入关键字查询"
        @click.native="clickSearchBox">
      </mt-search>
      <div class="addressBar" v-show="addrBarVisable">
        <span class="xiamen">全厦门</span>
        <ul>
          <li v-for="(item, index) in areaList" :key="index" @click="areaClick(item, index)">
            <span class="iconfont iconlocation xiaLocation" v-show="index===areaIndex"></span>
            {{item}}
          </li>
        </ul>
      </div>
    </div>
    <!-- 地址列表 -->
    <div class="addrList">
      <div class="item" v-for="(item, index) in addrList" :key="index" @click="addrClick(index)">
        <span class="iconfont iconlocation location"></span>
        <div>
          <div class="community">海洋公寓</div>
          <div class="addrInfo">厦门市思明区龙虎山路726号501</div>
        </div>
        <div :style="{display: index===addrIndex ? 'block' : 'none'}"><span class="iconfont icondagou dagou"></span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 查询字符按
      queryValue: '',
      // 被点击地址的下标
      addrIndex: 0,
      // 被点击地区的下标
      areaIndex: '',
      // 地址列表
      addrList: [55, 66, 77],
      // 厦门区列表
      areaList: ['思明', '湖里', '集美', '海沧', '同安', '翔安'],
      // 厦门地址栏是否可以显示标志为
      addrBarVisable: false
    }
  },
  created () {},
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    // 地址被点击
    addrClick (i) {
      this.addrIndex = i
    },
    // 区被点击
    areaClick (item, i) {
      console.log(item)
      this.queryValue = item
      this.areaIndex = i
      this.addrBarVisable = false
    },
    // 点击搜索框
    clickSearchBox () {
      this.addrBarVisable = !this.addrBarVisable
    }
  }

}
</script>

<style lang="less" scoped>
  .addressBox {
    margin-top: 30px;
    padding: 0 10px;
    > div:nth-child(2) {
      padding: 6px 18px;
    }
    .search {
      border: 1px solid #ccc;
      border-radius: 3px;
    }
    /deep/ .mint-search {
      height: 34px;
    }
    /deep/ .mint-searchbar {
      padding: 0;
      background-color: #fff;
    }
    /deep/ .mint-searchbar-inner {
      padding: 0;
      height: 34px;
      // border: 2px solid #ccc;
      // border-radius: 5px;
    }
    /deep/ i {
      font-size: 22px;
      color: #9A9A9A;
      margin: 0 8px 0 6px;
    }
    /deep/ a {
      height: 34px;
      line-height: 34px;
      padding: 0 10px;
      color: #333333;
    }
    /deep/ input::-webkit-input-placeholder {
      font-size: 15px;
      color: #CCCCD1;
    }
    /deep/ input {
      color: #666666;
      font-size: 15px;
    }
    .bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      font-size: 13px;
      // background-color: #ccc;
      .back {
        font-size: 13px;
        color: #6B6B6B;
        .jiantou {
          vertical-align: middle;
        }
      }
      > span {
        font-weight: 700;
        color: #333333;
      }
      .btn {
        box-sizing: border-box;
        width: 66px;
        height: 27px;
        text-align: center;
        line-height: 27px;
        color: #F59E0E;
        border: 1px solid #F59E0E;
        border-radius: 5px;
      }
    }

    .addrList {
      margin-top: 30px;
      padding: 0 18px;
      .item {
        display: flex;
        height: 70px;
        margin-bottom: 10px;
        // background-color: #ccc;
        .location {
          font-size: 28px;
          color: #FCA20D;
          margin-right: 10px;
        }
        .community {
          font-size: 15px;
          color: #333;
          padding-bottom: 8px;
        }
        .addrInfo {
          font-size: 12px;
          color: #666;
        }
        .dagou {
          font-size: 25px;
          margin-left: 30px;
          color: #FFA70E;
        }
      }
    }
    .searchBox {
      position: relative;

      .addressBar {
        display: flex;
        position: absolute;
        top: 45px;
        box-sizing: border-box;
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
        justify-content: space-between;
        padding: 0 15%;
        font-size: 14px;
        color: #666;

        .xiaLocation {
          margin-right: 15px;
          font-size: 18px;
          vertical-align: middle;
          color: #FBB12C;
        }
        li {
          line-height: 35px;
          text-align: right;
        }
        .xiamen {
          line-height: 35px;
        }
      }
    }
  }
</style>
